<script setup lang="ts">
import { ElCard } from 'element-plus'
import { propTypes } from '@/utils/prop-types'
import { useDesign } from '@/hooks/web/use-design'

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('content-wrap')

defineProps({
  title: propTypes.string.def(''),
  message: propTypes.string.def(''),
  external: propTypes.bool.def(false)
})
</script>

<template>
  <el-card :class="[prefixCls, { external }]" shadow="never">
    <template v-if="title" #header>
      <div class="flex items-center">
        <span class="text-16px font-700">{{ title }}</span>
      </div>
    </template>
    <div>
      <slot></slot>
    </div>
  </el-card>
</template>
<style lang="less" scoped>
.external {
  height: 100%;
}

:deep(.el-card__body) {
  height: 100%;

  & > div {
    height: 100%;
  }
}
</style>
